<template>
  <div class="height100">
    <div class="top-logo">
      <div class="sking-admin-logo">{{ $t("message.title") }}</div>
      <div class="system">SYSTEM</div>
    </div>
    <!-- todo 如何使左侧菜单栏和右侧内容高度保持一致？-->
    <div style="background-color: #545c64;padding-bottom: 10px">
      <el-autocomplete
        v-model="queryParams.name"
        prefix-icon="el-icon-search"
        :fetch-suggestions="searchMenu"
        placeholder="搜索菜单"
        value-key="name"
        @select="handleSearchSelect"
        style="width: 90%;left:5%">
      </el-autocomplete>
    </div>
    <el-menu
      v-show="showMenu"
      :collapse="false"
      ref="elMenu"
      :default-active="activeIndex"
      class="left-menu"
      background-color="#545c64"
      text-color="#fff"
      @select="handleSelect"
      active-text-color="#ffd04b">
      <!--左侧菜单组件-->
      <NavMenu :navMenus="menus"></NavMenu>
    </el-menu>
  </div>
</template>

<script>
  import {mapState, mapActions} from 'vuex'
  import NavMenu from './NavMenu'
  import {getMenus, getMenuTree} from '../utils/element-helper'
  import util from '../utils/util'

  export default {
    name: "Left",
    props: {},
    components: {
      NavMenu,
    },
    data() {
      return {
        queryParams: {},
        activeIndex: "/dashboard",
        timeout: null,
        menuArray: [],
        clientWidth: '',
        showMenu: true,
      };
    },
    async created() {
      this.$emit('toggleMainLoading')
      //从后台获取用户有权限的菜单
      let menus = await getMenuTree()
      this.setMenus(menus)
      this.menuArray = util.treeToArray(menus)
      this.clientWidth = `${document.documentElement.clientWidth}px`;
      this.showMenu = this.clientWidth.substr(0, this.clientWidth.length - 2) >= 975
      this.$nextTick(() => {
        this.$emit('toggleMainLoading')
      })
    },
    computed: {
      ...mapState("menu", [
        "menus"
      ])
    },
    //TODO 左侧导航栏resize后宽度会变化，需要单独设置宽度
    // mounted() {
    //   // 动态设置背景图的高度为浏览器可视区域高度
    //   // 首先在Virtual DOM渲染数据时，设置下背景图的高度．
    //   this.clientWidth = `${document.documentElement.clientWidth}px`;
    //   // 然后监听window的resize事件．在浏览器窗口变化时再设置下背景图高度．
    //   let that = this
    //   window.onresize = () => {
    //     that.clientWidth = `${document.documentElement.clientWidth}px`;
    //     that.showMenu = that.clientWidth.substr(0, that.clientWidth.length - 2) >= 975
    //   };
    // },
    methods: {
      searchMenu(queryString, cb) {
        let menu = queryString ? this.menuArray.filter(this.createNameFilter(queryString)) : this.menuArray;
        clearTimeout(this.timeout)
        this.timeout = setTimeout(() => {
          cb(menu);
        }, 1000 * Math.random());
      },
      createNameFilter(queryString) {
        return (state) => {
          return (state.name.indexOf(queryString) === 0)
        }
      },
      handleSearchSelect(item) {
        if (item.children && item.children.length > 0) {
          this.$refs.elMenu.open('/' + item.code)
        } else {
          this.handleSelect('/' + item.code, '/' + item.code)
        }
      },
      handleSelect(key, keyPath) {
        this.$router.push({path: key})
        this.activeIndex = key
      },
      ...mapActions("menu", [
        "setMenus"
      ]),
    }
  };
</script>

<style scoped>

  .top-logo {
    text-align: center;
    background-color: #545c64;
    padding: 5px 0 10px 0;
    height: 12%;
  }

  div.sking-admin-logo {
    width: 100%;
    border-bottom: 2px solid #474c58;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 34px;
  }

  .left-menu {
    border: 0px;
    height: 86.8%;
    /*width: auto;*/
    min-height: 480px;
  }

  .system {
    font-size: 12px;
    color: #909399;
    text-align: left;
    margin: 5px 0 0px 25px;
  }


</style>
